<template>
  <div class="wp">
    <h2>积分订单</h2>
    <div class="wpp" v-for="(item, index) in arr2" :key="index">
      <div class="top">
        <span>订单号:{{ item.id }}</span>
        <div>
          <span>下单日期:</span>
          <span
            >{{ item.n }}.{{ item.y < 10 ? "0" + item.y : item.y }}.{{
              item.r < 10 ? "0" + item.r : item.r
            }}</span
          >
          <span>
            {{ item.s < 10 ? "0" + item.s : item.s }}:{{
              item.f < 10 ? "0" + item.f : item.f
            }}:{{ item.m < 10 ? "0" + item.m : item.m }}</span
          >
        </div>
        <p>订单状态: <span>已完成</span></p>
      </div>
      <div class="bottom">
        <div class="left">
          <div class="img">
            <img :src="item.url" alt="" />
            <span>{{ item.name }}{{ item.num }}个装</span>
          </div>
          <span class="geshu">{{ item.num }}个装</span>
          <span class="num">×{{ item.dan }}</span>
        </div>
        <div class="fen">积分:{{ item.fen }}</div>
        <div class="btn">
          <span @click="btn2">查看详情</span>
          <span @click='add(index)'>删除订单</span>
        </div>
      </div>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="arr1.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import Mock from "mockjs";

const Data = Mock.mock({
  "list|50": [
    {
      "y|1-12": 1,
      "r|1-28": 1,
      "s|0-23": 0,
      "f|0-59": 0,
      "m|0-59": 0,
      "dan|1-9":5,
      "id|100000000000-999999999999": 100000000000,
      "name|1": ["云南昭通丑苹果", "河南好苹果", "河北红苹果", "四川绿苹果"],
      "num|3-6": 3,
      "fen|50-100": 50,
      "url|1": [
        require("./images/liwu.png"),
        require("./sp1.jpg"),
      ],
      "n|2010-2021": 2010,
    },
  ],
});
export default {
  name: "integraOrder",
  data() {
    return {
      currentPage: 1,
      total: 100,
      pageSize: 3,
      arr1: Data.list,
      currentPage3: 1,
    };
  },
  computed: {
    arr2() {
      return this.arr1.slice(
        this.pageSize * (this.currentPage3 - 1),
        this.pageSize * this.currentPage3
      );
    },
  },

  methods: {
    btn2(){
      this.$router.push('/grzx/grzl')

    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage3 = val;
      console.log(new Date(2020, 3, 14));
    },
    add(index){
      this.arr1.splice((this.currentPage3-1)*this.pageSize+index,1)
      console.log('1');
    }
  },
  //函数名称是自己定义的，可以随便修改，但是记住，要与<el-pagination>标签中的@size-change 和 @current-change 保持一致
};
</script>

<style scoped>
.wp {
  /* display: flex; */
  width: 1000px;
  border: 1px #e7e7e7 solid;
  overflow: hidden;
}
h2 {
  height: 56px;
  line-height: 56px;
  padding-left: 15px;
  border-bottom: 1px #e7e7e7 solid;
      font-size: 18px;
}

.b-3 {
  border-bottom: 1px solid #e7e7e7;
  border-top: 1px solid #e7e7e7;
  margin-top: 20px;
}
.b-4 {
  display: flex;

 
  margin: 0 auto;
  background: #f2f2f2;
  height: 50px;
  line-height: 50px;
}
.b-4 > span {
  display: block;
  margin-left: 15px;
  width: 270px;
}
.b-4 span:nth-child(3) {
  color: #96bc90;
}
.b-4 span:nth-child(4) {
  margin-left: 80px;
}
.b-6 {
  display: flex;
  margin-left: 80px;
}
.b-6 > span {
  display: block;
}
.b-6 span:nth-child(2) {
  color: #f08200;
}
.b-8 {
  display: flex;
}
.b-9 {
  display: flex;

  justify-content: space-around;
  align-items: center;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}
.b-9 span {
  display: block;
  justify-content: space-around;
  margin: 20px 0 20px 0;
}
.b-9 span:nth-child(1) {
  margin-left: -30px;
  border: 1px solid #e7e7e7;
}
.b-10 {
  width: 700px;
  display: flex;
  flex-direction: column;
}
.b-11 {
  width: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}
.b-11 span:nth-child(1) {
  margin-bottom: -100px;
}

.b-12 {
  width: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}
.b-12 span {
  margin: 10px 0;
}
.b-12 span:nth-child(1) {
  color: #96bc90;
  text-decoration: underline;
  cursor: pointer;
}
.b-12 span:nth-child(2) {
  color: #fff;
  display: block;
  width: 90px;
  height: 25px;
  background: #f08200;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
}
.b-12 span:nth-child(3) {
  color: #fff;
  display: block;
  width: 90px;
  height: 25px;
  background: #999999;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
}
.el-table .el-table-column:nth-child(1) div {
  text-align: center;
}
.wpp {
  border: 1px #ccc solid;
  width: 950px;
  margin: 25px auto;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  background: rgb(238, 238, 238);
}
.top > div {
  display: flex;
  justify-content: space-between;
  margin-left: -180px;
}
.top > div span {
  margin: 0 5px;
}
.top p span {
  font-size: 16px;
  color: #f08200;
}
.bottom {
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
}

.bottom .img img {
  width: 80px;
  height: 80px;
  border: 1px #ccc solid;
}
.img{
  display: flex;
  align-items: center; 
  width: 300px;
 
}
.img span{
  margin-left: 30px;
}
.left{
  display: flex;
  justify-content: space-between;
  align-items: center; 
  color: #999;
 
}
.geshu{
  width: 150px;
  color: #999;
}
.btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}
.fen{
  height: 100%;
  border-right: 1px #ccc solid;
    border-left: 1px #ccc solid;
    padding: 0 110px;
    display: flex;
    align-items: center;
}
.btn a{
  margin-bottom: 20px;
  text-decoration: underline;
  color: #4b943d;
}
.btn span{
  width: 90px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  margin-top: 10px;
  border-radius: 10px;
  cursor: pointer;
  background: rgb(240, 130, 0);
}
.el-pagination{
  padding-left:20% ;
}
</style>